<template>
	<view class="container">
			<!-- #ifdef MP -->
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.text}}
			</view>
		</view>
	<!-- #endif --> 
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view 
					class="list-scroll-content"   
					scroll-y
					@scrolltolower="loadData"
				>    
					<!-- 订单列表 -->
					<view
						v-for="(item,index) in orderList" :key="index"
						class="order-item" 
					>
					<view class="item-catyes" @click="xparticulars(item)">
						<van-icon name="shop-o"/>&nbsp; 
						<text class="time">{{item.subOrderDetailInfos[0].commodityHoldUserName}}</text>
							<text class="caty-Cancel" v-if="item.status == 'Cancel'" :class="item.subOrderDetailInfos[0].status">{{formatEmployment(item.status)}}</text>
							<text class="caty-tistus" v-else :class="item.subOrderDetailInfos[0].status">{{formatEmployment(item.subOrderDetailInfos[0].status)}}</text>
					</view>   
					      
					<view v-for="(a,b) in item.subOrderDetailInfos" :key="b">
						<view
						@click="xparticulars(item)"
							class="goods-box-single"
						>
							<image class="goods-img" :src="a.commodityMainImages[0]" mode="aspectFill"></image>
							<view class="right">
								<text class="title clamp">{{a.commodityTitle}}</text>
								<text class="attr-box">规格：{{a.specName}}</text>
								<text class="price">{{a.price}}</text> 
								<text class="num">x{{a.number}}</text>
							</view>
						</view>
						
					</view>
					<view class="price-box">
						<text class="price">付款：￥{{item.subOrderDetailInfos[0].totalPrice}}</text>
					</view>
					<view class="action-box b-t" v-if="item.status === 'WaitPay'">
						<button class="action-btn" @click="cancelOrder(item)">取消订单</button>
						<button class="action-btn recom" @click="payreom(item)">立即支付</button>
					</view>
					<view class="action-box b-t" v-if="item.subOrderDetailInfos[0].status == 'InDelivery'">
						<button class="action-btn" style="border: 1px solid #ff7144; color: #ff7144;" @click="xharvest(item)">确认收货</button>
					</view>
					</view> 
					 
				</scroll-view>
			</swiper-item>
			<van-loading class="actoue" v-show="siopen" size="24px" type="spinner">加载中...</van-loading>
		</swiper>
	</view>
</template> 

<script>
    import roles from '@/http/roles.js'
	
	import employeesConst from "@/employees/employees.js";
	const hireTypet = {};
	employeesConst.hireTypegser.forEach((item) => {
	  hireTypet[item.orderStatus] = item.value;
	});
	export default {

		data() {
			return {
				siopen:false,
				tabCurrentIndex: null,
				q:{
					index: 1,
					size: Number,
					orderStatus:null
				},
				a:20,
				orderList:[],
				navList: [{
						state: null,
						text: '全部',
					
					},
					{
						state: "WaitPay",
						text: '待付款',
					},
					{
						state: "PaySuccess",
						text: '待发货',
						
					},
					{
						state: "InDelivery",
						text: '待收货',
					
					},
					{
						state: "Receipt",
						text: '已完成',
						
					}
				],
			};
		},
		
		onLoad(){
			this.loadData()
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.loadData();
		},
		 //加载更多
		 onReachBottom:function(){
			console.log('123')
		 },
		methods: {
			//获取订单列表
			async loadData(){
				this.q.size = this.a
				const res = await roles.orderform(this.q)
				this.orderList = res.data.data
			}, 

			//swiper 切换 
			changeTab(e){
				this.q.orderStatus = this.navList[e.target.current].state
				this.tabCurrentIndex = e.target.current;
				wx.pageScrollTo({
				  scrollTop:0
				})
				this.loadData()  
			},
			//顶部tab点击
			tabClick(index){
				 this.q.orderStatus = this.navList[index].state  
				this.tabCurrentIndex = index;
				wx.pageScrollTo({
				  scrollTop:0
				})
				this.loadData()
			},
			//取消订单 
			async cancelOrder(item){
				    uni.showModal({
				    content: '确定取消订单么?',
					confirmColor:'#ff7144',
				    success: async(e)=>{
					if(e.confirm){
					const res = await roles.calloeder({"mainOrderId":item.mainOrderId})
					this.loadData()
					  }
					 },
					 })
			},
			// 确定收获
			async xharvest(item){
				uni.showModal({
				content: '确定要确认收货么?',
				confirmColor:'#ff7144',
				success: async(e)=>{
				if(e.confirm){
				const res = await roles.harvest({"subOrderId":item.subOrderDetailInfos[0].subOrderId})
				this.loadData()
				  }
				 },
				 })
			},
			// 查看订单详情
			xparticulars(item){
				uni.navigateTo({
					url: `/package/order/particulars?orderid=${item.mainOrderId}` 
				})
			},  
			// 状态转换
              formatEmployment(code){
				   return hireTypet[code];
			  }, 
			  // 立即支付
			  payreom(item){
				  uni.redirectTo({
				  	url: `/package/payment/payer?id=${item.mainOrderId}&price=${item.subOrderDetailInfos[0].totalPrice}`
				  })
			  }
		},
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
     .container{
		 height: 100%;
	 }
	.swiper-box{

		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
	
	.navbar{
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $uni-color-primary;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0; 
					transform: translateX(-50%);
					width: 44px;    
					height: 0; 
					border-bottom: 2px solid $uni-color-primary;
				}
			}
		}
	}

	.uni-swiper-item{
	
	}
	.order-item{
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-bottom: 16upx;
	
		/* 多条商品 */
		.goods-box{
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;
			.goods-item{
				width: 150upx;
				height: 150upx;
				display: inline-block;
				margin-right: 24upx;
			}
			.goods-img{
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
		}
		/* 单条商品 */
		.goods-box-single{
			display: flex;
			padding: 20upx 0;
			.goods-img{
				display: block;
				width: 120upx;  
				height: 120upx;
				border-radius: 10px;
			}
			.right{
				flex: 1;
		
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;
				.title{
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
					margin-bottom: 20rpx;
				}
				.attr-box{
					font-size: $font-sm + 2upx;
					color: $font-color-light;
	
				}
				.price{
					transform: translateY(-120%);
					float: right;
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					&:before{
						content: '￥'; 
						font-size: $font-sm;   
						margin: 0 2upx 0 8upx;
					}
				}
				.num{
					position: absolute;
					right: 35rpx;
					font-size:24rpx !important;
					margin: 0 8upx !important;
					color:#A4A4A4 !important;
				}
			}
		}
		
		.price-box{
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
		
			.price{
				font-size: $font-lg;
				color: $font-color-dark;
				&:before{
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}
		.action-box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}
		.action-btn{
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color:#ff7144;
			background: #fff;
			border-radius: 100px;
			&:after{
				border-radius: 100px;
			}
			&.recom{
				background: #fff9f9;
				color: #ff7144;
				&:after{
					border-color: #ff7144;
				}
			}
		}
	}
	.item-catyes{
		display: flex;
		 margin-top: 30rpx;
	}
	.time{ 
		display: inline-block;
		font-size: 30rpx;
		margin-left: 10rpx;
	}
	.caty-tistus{
		display: inline-block;
		position: absolute;
		right: 20rpx;
		margin-right: 30rpx;
		font-size: 28rpx;
		color: $uni-color-primary;
	}
	.caty-Cancel{
		display: inline-block;
		position: absolute;
		right: 20rpx;
		margin-right: 30rpx;
		font-size: 28rpx;
		color: $font-color-light;
	} 
	// 加载
	.actoue{
		text-align: center;
	}
</style>
